<template>
  <scroll-view scroll-y :class="[classes]" :style="styles" @scrolltolower="onscrollend">
    <slot></slot>
  </scroll-view>
</template>

<script lang="ts" setup>
import type { CSSProperties } from "vue";
import type { Props, Slots, Emits } from "./types.ts";
import { useDeviceStore } from "@/stores/device.ts";
import { useSystemStore } from "@/stores/system.ts";
import { eliminateUndefined } from "@/utils/helper.ts";

defineOptions({
  name: "AdaptionScrollView"
});

const props = withDefaults(defineProps<Props>(), {
  bgColor: "transparent",
  bottomHeight: 0,
  topHeight: 0,
  costomClass: ""
});

defineSlots<Slots>();

const emit = defineEmits<Emits>();
const deviceStore = useDeviceStore();
const device = storeToRefs(deviceStore);
const nav = device.navbar;

const classes = computed<string>(() => {
  return `adaption-scroll-view ${props.costomClass || ""}`;
});

const styles = computed(() => {
  const value: CSSProperties = {};

  value.height = `calc(100vh - (${nav.value.statusBarHeight || 0}px + ${nav.value.titleBarHeight || 0
  }px + ${typeof props.bottomHeight === "string" ? props.bottomHeight : `${props.bottomHeight || 0}px`} + ${typeof props.topHeight === "string" ? props.topHeight : `${props.topHeight || 0}px`}) - env(safe-area-inset-bottom))`;

  return eliminateUndefined(value, true);
});
function onscrollend() {
  emit('scrollend')
}
</script>

<style lang="scss" scoped>
</style>